<template>
  <el-table :data="tagsList" style="width: 100%" :cell-style="{ padding: '5px 0' }">
    <el-table-column type="index" label="序号"> </el-table-column>
    <el-table-column prop="subjectName" label="所属学科"> </el-table-column>
    <el-table-column prop="tagName" label="标签名称"> </el-table-column>
    <el-table-column prop="username" label="创建者"> </el-table-column>
    <el-table-column label="创建日期">
      <template slot-scope="scope"
        ><span>{{ scope.row.addDate | fromDate }}</span></template
      >
    </el-table-column>
    <el-table-column label="状态">
      <template slot-scope="scope">
        <span>{{ scope.row.state == 1 ? '已启用' : '已禁用' }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="500px">
      <template slot-scope="scope">
        <el-button type="text" @click="changeState(scope.row)"
          ><span>{{ scope.row.state == 1 ? '禁用' : '启用' }}</span></el-button
        >
        <el-button type="text" :disabled="scope.row.state == 1 ? true : false" @click="$emit('edit', scope.row)"><span>修改</span></el-button>
        <el-button type="text" :disabled="scope.row.state == 1 ? true : false" @click="delTags(scope.row)"><span>删除</span></el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import dayjs from 'dayjs'
import { changeState, remove } from '@/api/hmmm/tags'
export default {
  name: 'tagsTable',
  props: {
    tagsList: {
      type: Array,
      require: true
    },
    value: {
      type: Number,
      require: true
    }
  },
  methods: {
    //   切换状态
    async changeState(val) {
      let stateValue = {
        id: val.id,
        state: val.state == 1 ? 2 : 1
      }
      try {
        await changeState(stateValue)
        this.$message.success('状态修改成功')
        // 重拉列表
        this.$emit('changeState')
      } catch (error) {
        console.dir(error)
        this.$message.error('状态修改失败')
      }
    },
    // 删除事件
    async delTags(val) {
      try {
        await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await remove(val)
        // 在拉列表之前 判断一下不是第一页 且是当前页的最后一条数据 是的话页码数需要-1再拉列表
        if (this.value != 1 && this.tagsList.length == 1) {
          this.$emit('input')
        }
        this.$emit('changeState')
        this.$message.success('删除成功')
      } catch (error) {
        this.$message.info('取消删除')
      }
    }
  },
  filters: {
    //   格式化时间
    fromDate: function(val) {
      return dayjs(val).format('YYYY-MM-DD hh:mm:ss')
    }
  }
}
</script>

<style></style>
